<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Sign Up</title>
    <link href="/basic/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body id="home">
<div id="signup">
<s:include value="/basic/topbar_blank.jsp"></s:include>
	<div style="height:80px;"></div>
    <div style="height:480px;">
    <s:if test="%{phase==2}">
    	<ol class="step1">
        	<li class="s1">1.Create a HOOW.IN account</li>
            <li class="s2">2.Add info on woshini.de</li>
            <li class="s3">3.Upload your avatar</li>
        </ol>
        <div id="banner">
        	<p>A HOOW.IN account can give you access to all sites on HOOW.IN, which will provide you with many usefull local online applications.</p>
            <p>Your account name on HOOW.IN will be <span class="special"><s:property value="email"></s:property></span>, and you are free to change it afterwards.</p>
            <p>To finish the creation, please supply the following infomation:</p>
        </div>
        <s:form action="createAccount" id="create_account" namespace="/basic">
        	<s:hidden name="email"></s:hidden>
        	<s:hidden name="phase"></s:hidden>
            <s:hidden name="invitor"></s:hidden>
        	<div class="form_item">
            	<div class="item_label">Full Name:</div>
                <div class="item_input"><input type="text" class="input_text" name="name" /></div>
                <div class="item_info"><s:fielderror name="name"><s:param>name</s:param></s:fielderror></div>
            </div>
            <div class="form_item">
            	<div class="item_label">New Password:</div>
                <div class="item_input"><input type="password" class="input_text" name="password" /></div>
                <div class="item_info"><s:fielderror><s:param>password</s:param></s:fielderror></div>
            </div>
            <div class="form_item">
            	<div class="item_label">I am:</div>
                <div class="item_input"><select name="sex"><option value="off">select sex</option><option value="m">male</option><option value="f">female</option></select></div>
                <div class="item_info"><s:fielderror><s:param>sex</s:param></s:fielderror></div>
            </div>
            <div class="form_item">
            	<div class="item_label">I am better at:</div>
                <div class="item_input"><select name="language"><option value="off">select language</option><option value="en">English</option><option value="zh">Chinese</option></select></div>
                <div class="item_info"><s:fielderror><s:param>language</s:param></s:fielderror></div>
            </div>
            <div class="form_item" style="margin-top:15px;">
            	<div class="item_label"></div>
                <div class="item_input" style="padding-top:0;"><input type="submit" id="submit" value="Create"/></div>
            </div>
        </s:form>
    </s:if>
    <s:elseif test="%{phase==3}">
    	<ol class="step2">
        	<li class="s1">1.Create a HOOW.IN account</li>
            <li class="s2">2.Add info on woshini.de</li>
            <li class="s3">3.Upload your avatar</li>
        </ol>
        <div id="banner">
        	<p>我是你的(woshini.de) aims to help 100 language leraners. We are glad to tell you that you are one of them.</p>
            <p>Now you have successfully created your HOOW.IN account with your email <span class="special"><s:property value="email"></s:property></span>.</p>
            <p>To get access to 我是你的(woshini.de), you need to provide some additional information as follows:</p>
        </div>
        <s:form action="createAccount" id="create_account" namespace="/basic">
        	<s:hidden name="phase"></s:hidden>
        	<div class="form_item">
            	<div class="item_label">My Nationality:</div>
                <div class="item_input"><input type="text" class="input_text" name="nationality" /></div>
                <div class="item_info"><s:fielderror><s:param>nationality</s:param></s:fielderror></div>
            </div>
            <div class="form_item">
            	<div class="item_label">My Birthday:</div>
                <div class="item_input"><select name="month"><option value="-1">Month:</option><option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option></select><select name="day" autocomplete="off"><option value="-1">Day:</option><option value="1">1</option><option value="2">2</option><option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select><select name="year"><option value="-1">Year:</option><option value="2011">2011</option> 
<option value="2010">2010</option> 
<option value="2009">2009</option> 
<option value="2008">2008</option> 
<option value="2007">2007</option> 
<option value="2006">2006</option> 
<option value="2005">2005</option> 
<option value="2004">2004</option> 
<option value="2003">2003</option> 
<option value="2002">2002</option> 
<option value="2001">2001</option> 
<option value="2000">2000</option> 
<option value="1999">1999</option> 
<option value="1998">1998</option> 
<option value="1997">1997</option> 
<option value="1996">1996</option> 
<option value="1995">1995</option> 
<option value="1994">1994</option> 
<option value="1993">1993</option> 
<option value="1992">1992</option> 
<option value="1991">1991</option> 
<option value="1990">1990</option> 
<option value="1989">1989</option> 
<option value="1988">1988</option> 
<option value="1987">1987</option> 
<option value="1986">1986</option> 
<option value="1985">1985</option> 
<option value="1984">1984</option> 
<option value="1983">1983</option> 
<option value="1982">1982</option> 
<option value="1981">1981</option> 
<option value="1980">1980</option> 
<option value="1979">1979</option> 
<option value="1978">1978</option> 
<option value="1977">1977</option> 
<option value="1976">1976</option> 
<option value="1975">1975</option> 
<option value="1974">1974</option> 
<option value="1973">1973</option> 
<option value="1972">1972</option> 
<option value="1971">1971</option> 
<option value="1970">1970</option> 
<option value="1969">1969</option> 
<option value="1968">1968</option> 
<option value="1967">1967</option> 
<option value="1966">1966</option> 
<option value="1965">1965</option> 
<option value="1964">1964</option> 
<option value="1963">1963</option> 
<option value="1962">1962</option> 
<option value="1961">1961</option> 
<option value="1960">1960</option> 
<option value="1959">1959</option> 
<option value="1958">1958</option> 
<option value="1957">1957</option> 
<option value="1956">1956</option> 
<option value="1955">1955</option> 
<option value="1954">1954</option> 
<option value="1953">1953</option> 
<option value="1952">1952</option> 
<option value="1951">1951</option> 
<option value="1950">1950</option> 
<option value="1949">1949</option> 
<option value="1948">1948</option> 
<option value="1947">1947</option> 
<option value="1946">1946</option> 
<option value="1945">1945</option> 
<option value="1944">1944</option> 
<option value="1943">1943</option> 
<option value="1942">1942</option> 
<option value="1941">1941</option> 
<option value="1940">1940</option> 
<option value="1939">1939</option> 
<option value="1938">1938</option> 
<option value="1937">1937</option> 
<option value="1936">1936</option> 
<option value="1935">1935</option> 
<option value="1934">1934</option> 
<option value="1933">1933</option> 
<option value="1932">1932</option> 
<option value="1931">1931</option> 
<option value="1930">1930</option> 
<option value="1929">1929</option> 
<option value="1928">1928</option> 
<option value="1927">1927</option> 
<option value="1926">1926</option> 
<option value="1925">1925</option> 
<option value="1924">1924</option> 
<option value="1923">1923</option> 
<option value="1922">1922</option> 
<option value="1921">1921</option> 
<option value="1920">1920</option> 
<option value="1919">1919</option> 
<option value="1918">1918</option> 
<option value="1917">1917</option> 
<option value="1916">1916</option> 
<option value="1915">1915</option> 
<option value="1914">1914</option> 
<option value="1913">1913</option> 
<option value="1912">1912</option> 
<option value="1911">1911</option> 
<option value="1910">1910</option> 
<option value="1909">1909</option> 
<option value="1908">1908</option> 
<option value="1907">1907</option> 
<option value="1906">1906</option> 
<option value="1905">1905</option> </select></div>
                <div class="item_info"><s:fielderror><s:param>birthday</s:param></s:fielderror></div>
            </div>
            <div class="form_item">
            	<div class="item_label">Now I want to say:</div>
                <div class="item_input" style="padding-top:0; width:300px;"><textarea name="words" style="width:290px; height:38px; border:solid 1px #999;"></textarea></div>
                <div class="item_info"><s:fielderror><s:param>words</s:param></s:fielderror></div>
            </div>
            <div class="form_item" style="margin-top:15px;">
            	<div class="item_label"></div>
                <div class="item_input" style="padding-top:0;"><input type="submit" id="submit" value="Add"/></div>
            </div>
        </s:form>
    </s:elseif>
    <s:else>
    	<ol class="step3">
        	<li class="s1">1.Create a HOOW.IN account</li>
            <li class="s2">2.Add info on woshini.de</li>
            <li class="s3">3.Upload your avatar</li>
        </ol>
        <div id="banner">
        	<p>A clear avatar can help your friends to recognize you. A beautiful avatar can attract many followers.</p>
            <p>The following tool can help you to generate a good avatar to be used on 我是你的.</p>
        </div>
        <div id="flash_container"><div id="fc1"><h1>This is flash content, you need flash player to view it.</h1><p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://static.hoow.in/public/img/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p></div>
<script type="text/javascript" src="http://static.hoow.in/public/js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#dddddd";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "cadc";
attributes.name = "cadc";
attributes.align = "middle";
	swfobject.embedSWF("/basic/md/avatar.swf", "fc1", "500", "300", "10.0.0", "http://static.hoow.in/public/swf/expressInstall.swf", flashvars, params, attributes);
</script></div>
    </s:else>
    </div>
	<s:text name="info.footer"></s:text>
</div>
</body>
</html>